<title>考勤统计</title>
<div class="layui-card layadmin-header">
    <div class="layui-breadcrumb" lay-filter="breadcrumb" lay-separator=">">
        <a lay-href=""><i class="layui-icon layui-icon-locate"></i>您当前的位置：</a>
        <a><cite>考勤管理</cite></a>
        <a><cite>考勤统计</cite></a>
    </div>
</div>

<div class="layui-fluid custom-attendance-page">
    <div class="attendance-top">
        <div class="layui-card">
            <div class="layui-card-body">
                <form class="layui-form" lay-filter="attendance-form-filter" id="custom-attendance-form">
                    <div class="layui-form-item layui-leave-checkboxs" id="state-box"></div>
                    <div class="layui-form-item">
                        <div class="layui-inline">
                            <label class="layui-form-label">单位：</label>
                            <div class="layui-input-inline">
                                <select name="department" required lay-verify="required" id="custom-depart-select"></select>
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label">姓名：</label>
                            <div class="layui-input-inline">
                                <input type="text" name="username" autocomplete="off" class="layui-input layui-input-name">
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label">开始时间：</label>
                            <div class="layui-input-inline">
                                <input type="text" required lay-verify="required" name="starttime" autocomplete="off" class="layui-input" id="custom-starttime-input">
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label">结束时间：</label>
                            <div class="layui-input-inline">
                                <input type="text" required lay-verify="required" name="endtime" autocomplete="off" class="layui-input" id="custom-endtime-input">
                            </div>
                        </div>
                        <div class="layui-inline">
                            <button type="button" lay-submit class="layui-btn layui-btn-query" lay-filter="custom-query-filter">查询</button>
                            <button type="reset" class="layui-btn layui-btn-normal layui-btn-task bgColor layui-hide" data-target="reset">重置</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <div class="attendance-bottom">
        <div class="layui-card">
            <div class="layui-card-header">
                <div class="layui-inline">
                    <button type="button" class="layui-btn bgBlue layui-btn-export T-btn" data-target="export">导出数据</button>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">单位：</label>
                    <div class="layui-input-block layui-search-depart">电子政务处</div>
                </div>
                <div class="layui-inline" style="margin-right: 35px;">
                    <label class="layui-form-label">时间：</label>
                    <div class="layui-input-block layui-search-time">2019-02-03~2019-04-25</div>
                </div>
            </div>
            <div class="layui-card-body">
                <table id="depart-table" lay-filter="custom-depart-filter"></table>
            </div>
        </div>
    </div>
</div>

<!-- 请假状态模板 -->
<script type="text/html" id="state">
    {{# if(d.data && d.data.length > 0){ }}
        {{# layui.each(d.data, function(index, item){ }}
            <input type="checkbox" name="state-{{item.value}}" value="{{item.key}}" {{item.key === "all" ? 'lay-filter="layui-checkAll-filter"' : 'lay-filter="layui-check-filter"'}}  title="{{item.value}}" lay-skin="primary"> 
        {{# }); }}
    {{# } }}
</script>

<!-- 单位模板 -->
<script type="text/html" id="depart">
    {{# if(d.data && d.data.length > 0){ }}
        {{# layui.each(d.data, function(index, item){ }}
            <option value="{{item.id}}">{{item.full_name}}</option>
        {{# }); }}
    {{# } }}
</script>

<style>
    .attendance-top .layui-inline{
        margin-right: 60px;
    }
    .layui-leave-checkboxs{
        padding-left: 60px;
    }
    .attendance-bottom{
        margin-top: 20px;
    }
    .attendance-bottom .layui-card{
        height: 680px;
    }
    .layui-btn-export{
        width: 96px;
        height: 30px;
        line-height: 30px;
        font-weight: 600;
        padding-left: 31px;
        color: #FFFFFF;
        cursor: pointer;
        background: url('/dist/style/res/formFill/form-submit.png') no-repeat #2669B1;
        background-position: 7px 5px;
    }
    .layui-btn-query{
        width: 71px;
        height: 30px;
        line-height: 30px;
        padding: 0 10px;
        text-align: right;
        background: url('../../dist/style/res/formFill/search.png') no-repeat 10px center;
        background-color: #77AF6F;
    }
    .attendance-bottom .layui-input-block{
        line-height: 38px;
    }
    .attendance-bottom .layui-card-header{
        padding-left: 60px;
    }
    .layui-table td{
        vertical-align: middle;
        text-align: center;
    }
    .highlight-text{
        cursor: pointer;
        color: green;
        border-bottom: 1px dashed green;
    }
    .voca-time{
        margin: 0 10px;
    }
</style>

<script>
    layui.use(['admin', 'form', 'table', 'laytpl', 'laydate', 'tools'], function(){
        var admin = layui.admin,
            form = layui.form,
            table = layui.table,
            laytpl = layui.laytpl,
            laydate = layui.laydate,
            tools = layui.tools;
        
        form.render(null, 'attendance-form-filter');

        var allVoca = [],
            allCheck = [],
            layout = ['.layui-table th', '.layui-table td', '.layui-form-checkbox span', '#custom-attendance-form', '.attendance-bottom .layui-card-header'];

        initState();
        initTimeSelect();
        initDepart();

        //初始化状态
        function initState(){
            admin.req({
                url: 'myapi/DC/api/rest/web/custom/DCCheckStatisticsSymbolQuery',
                done: function(res){
                    if(res.data.retcode == 0){
                        var html = '';
                        allVoca = res.data.data;
                        allVoca.unshift({value: '全选', key: 'all'});
                        if(allVoca && allVoca.length > 0){
                            layui.each(allVoca, function(index, item){
                                html += '<input type="checkbox" name="state-'+item.value+'" value="'+item.key+'"  '+(item.key=="all" ? "lay-filter='layui-checkAll-filter'" : "lay-filter='layui-check-filter'")+' title="'+item.value+'" lay-skin="primary">'
                            });
                        }
                        $('#state-box').html(html); 
                        //默认全选
                        form.render('checkbox', 'attendance-form-filter');  
                        $("#state-box div").eq(0).click();
                    }
                }
            })
        }

        //初始化单位
        function initDepart(){
            admin.req({
                url: 'myapi/DC/api/rest/web/custom/DCCheckStatisticsDeptComboBoxQuery',
                done: function(res){
                    var resp = res.data;
                    if(resp.retcode == 0){
                        if(resp.data && resp.data.length > 0){
                            var html = '';
                            layui.each(resp.data, function(index, item){
                                html += '<option value="'+item.id+'">'+item.full_name+'</option>'
                            });
                            $('#custom-depart-select').html(html);
                            form.render('select', 'attendance-form-filter');
                            var nowTime = moment().subtract(1, 'month').format('YYYY-MM-DD'),
                                endTime =moment().format('YYYY-MM-DD');
                            //初始化加载 
                            var symbol=[];
                            $.each($("#state-box input[lay-filter='layui-check-filter']"),function(index,item){ 
                                symbol.push({ key: $(item).val(), value: $(item).attr("title") })
                            });
                            initTable(symbol, res.data.data[0].id, nowTime, endTime);
                        }
                    }
                }
            })
        }

        //初始化时间选择框
        function initTimeSelect(){ 
            var nowTime = moment().subtract(1, 'month').format('YYYY-MM-DD'),
                endTime = moment().format('YYYY-MM-DD');
            laydate.render({
                elem: '#custom-starttime-input',
                type:'date',
                format: 'yyyy-MM-dd',
                value: nowTime
            });
            laydate.render({
                elem: '#custom-endtime-input',
                type:'date',
                format: 'yyyy-MM-dd',
                value: endTime
            });
        }

        //加载数据表格
        function initTable(symbol, deptId, starttime, endtime, name){
            var symbol = symbol || [],
                deptId = deptId || '',
                name = name || '',
                colls = [];
            colls = getTableHead(symbol, deptId, starttime, endtime, name);
            if(colls && colls.length > 0){
                layui.each(colls, function(index, item){
                    item.align = 'center';
                    item.event = 'string';
                    if(item.field == 'dept_name' || item.field == 'name'){
                        item.width = 150;
                        item.templet = function(d){
                            var newfield = d[item.field];
                            return '<span lay-tips='+newfield+'>'+newfield+'</span>'
                        }
                    }else{
                        item.templet = function(d){
                            var newfield = d[item.field],   
                                fields = '';
                            if(newfield != undefined){
                                var fieldText = JSON.stringify(d.data[item.field].data);
                                fields = '<span class="highlight-text T-btn" data-target="fieldMsg" data-text='+fieldText+'>'+newfield+'</span>';
                            }else{
                                fields = '<span></span>';
                            }
                            return fields;
                        }
                    }
                })
            }
            colls.unshift({ type: 'numbers', title: '序号', width: 44 });
            colls.push({ field: 'total', title: '合计', align: 'center', event: 'string'});
            table.render({
                elem: '#depart-table',
                method: 'post',
                url: 'myapi/DC/api/rest/web/custom/DCCheckStatisticsFormQuery',
                where: {
                    symbol: JSON.stringify(symbol),
                    dept_id: deptId,
                    starttime: starttime,
                    endtime: endtime,
                    name: name,
                    access_token: layui.data('layuiAdmin').access_token
                },
                height: 600,
                even: true,
                text: {
                    none: '<div class="no-data-tips"><img src="/src/style/res/about/empty.png"><p style="color:#DBDBDB;">暂无数据</p></div>'
                },
                page: {
                    groups: 1, 
                    limit: 10,
                    next:'<i class="layui-icon">&#xe602;</i>',
                    prev:'<i class="layui-icon">&#xe603;</i>',
                    first: '<i class="layui-icon">&#xe65a;</i>',
                    last: '<i class="layui-icon">&#xe65b;</i>',
                    layout: ['refresh', 'first', 'prev', 'skip', 'count', 'allPage', 'next', 'last'],
                    extend:{
                        first: true, //是否显示首页
                        spr: false,//是否显示页码分页符号 默认显示
                        pagecount: true//页码是否显示总数  groups=1时才有效
                    }
                },
                request: {
                    limitName: 'count'
                },
                parseData: function(res){
                    var data = res.data,
                        userList = data.data.userList || [],
                        titleMsg = data.data.titleMsg;
                    $('.layui-search-depart').html(titleMsg.dept_name);
                    $('.layui-search-time').html(titleMsg.time);
                    if(userList && userList.length > 0){
                        layui.each(userList, function(index, item){
                            var vocData = item.data;
                           if(vocData){
                                for(var i in vocData){
                                    item[i] = vocData[i].count
                                }
                            }
                        })
                    } 
                    return {
                        "code": data.retcode, //解析接口状态
                        "msg": data.retmsg, //解析提示文本
                        "count": data.data.totalNumber, //解析数据长度
                        "data": userList //解析数据列表
                    };
                },
                cols: [colls],
                done: function(res, curr, count){
                    tools.setFont(layout);
                }
            });
        }
        
        //获取表格头部
        function getTableHead(symbol, deptId, starttime, endtime, name){
            var symbol = symbol || [],
                deptId = deptId || '',
                name = name || '';
            var ajaxData = admin.req({
                url: 'myapi/DC/api/rest/web/custom/DCCheckStatisticsFormQuery',
                type: 'post',
                async: false,
                data: {
                    symbol: JSON.stringify(symbol),
                    dept_id: deptId,
                    starttime: starttime,
                    endtime: endtime,
                    name: name,
                    page: 1,
                    count: 10
                }
            });
            return ajaxData.responseJSON.data.data.header;
        }

        //监听查询
        form.on('submit(custom-query-filter)', function(data){
            var field = data.field,
                symbol = [],
                username = field.username || '';
            if(field["state-全选"]){delete field["state-全选"]}
            for(var i in field){
                if(i.indexOf('state') != -1){
                    symbol.push({ key: field[i], value: i.substr(6) })
                }
            }
            initTable(symbol, field.department, field.starttime, field.endtime, username);
        })

        //监听全选框
        form.on('checkbox(layui-checkAll-filter)', function(data){ 
            var checked = data.elem.checked,
                othis = data.othis,
                val = {},
                tempArr = JSON.parse(JSON.stringify(allVoca));
            if(checked){
                layui.each(tempArr, function(index, item){
                    if(item.key == 'all'){
                        tempArr.splice(index, 1);
                    }
                })
                layui.each(allVoca, function(index, item){
                    val['state-'+item.value] = item.key;
                })
                allCheck = tempArr;
            }else{
                allCheck = [];
                var depart = $('#custom-depart-select').val(),
                    name = $('.layui-input-name').val(),
                    starttime = $('#custom-starttime-input').val(),
                    endtime =  $('#custom-endtime-input').val();
                val = {
                    "department": depart,
                    "username": name,
                    "starttime": starttime,
                    "endtime": endtime
                }
                $('.layui-btn-task').trigger('click')
            } 
            form.val('attendance-form-filter', val);
        })

        //监听子复选框复选
        form.on('checkbox(layui-check-filter)', function(data){
            var checked = data.elem.checked,
                value = data.value,
                elem = data.elem;
            if(checked){
                allCheck.push({ key: value, value: elem.title });
            }else{
                layui.each(allCheck, function(index, item){
                    if(item.key == value){
                        allCheck.splice(index, 1);
                    }
                })
            }
            if(allCheck.length == allVoca.length-1){
                form.val('attendance-form-filter', {
                    'state-全选': 'all'
                });
            }else{
                form.val('attendance-form-filter', {
                    'state-全选': ''
                });
            }
        })

        //点击事件
        $('.custom-attendance-page').delegate('.T-btn', 'click', function(){
            var target = $(this).data('target');
            switch(target){
                case 'fieldMsg':
                    var textJson = JSON.parse(JSON.stringify($(this).data('text'))),
                        html = '<div class="layui-card-body"><ul class="custom">';
                    if(textJson){
                        layui.each(textJson, function(index, item){
                            html += '<li>'+
                                        '<span>'+item.dept_name+'-'+item. writeusername+'</span>'+
                                        '<span class="voca-time">'+item.time+'</span>'+
                                        '<span>'+(item.time_sort == "1" ? "上午" : "下午")+'</span>'
                                    '</li>'
                        })
                        html += "<ul></div>"
                        layer.open({
                            id: 'vocationHtml',
                            title:'<i class="formFill-icon"></i><span style="color:#FFF;">考勤情况</span>',
                            offset: '110px',
                            type: 1,
                            shadeClose: true,
                            area: ['350px', '400px'],
                            resize: false,
                            content: html
                        })
                    }else{
                        layer.msg('暂无考勤情况', {time: 1500});
                    }
                    break;
                case 'export':
                    var allCheck = $('.layui-form-checkbox'),
                        symbol = [],
                        depart = $('#custom-depart-select').val(),
                        name = $('.layui-input-name').val(),
                        starttime = $('#custom-starttime-input').val(),
                        endtime =  $('#custom-endtime-input').val();
                    layui.each(allCheck, function(index, item){
                        var that = this;
                        if($(that).hasClass('layui-form-checked')){
                            var key = $(that).prev().val(),
                                value =  $(that).prev().attr('title');
                            symbol.push({ key: key, value: value })
                        }
                    })
                    admin.req({
                        url: 'myapi/DC/api/rest/web/custom/DCCheckStatisticsDerivedForm',  
                        type: 'post',
                        data:{
                            symbol: JSON.stringify(symbol),
                            dept_id: depart,
                            starttime: starttime,
                            endtime: endtime,
                            name: name
                        },
                        done: function(res){
                            if(res.retcode == 0){
                                var url = 'myapi/DC'+res.data.url,
                                    name = res.data.name;
                                tools.downMethodfunction(url, name,"export");
                            }
                        }
                    })
                    break;
                default:
                    break;
            }
        })
        
        //查询绑定键盘事件
        $(document).keydown(function(e){ 
            if(e.keyCode == '13'){
                $('.layui-btn-query').click();
            }
        })
    })

</script>